<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		#WG {
			width: 878px;
			height: 699px;
			position: relative;
		}
		
		#WG #wg {
			position: absolute;
			left: 40px;
			bottom: 30px;
		}
		
		#WG #wg ul li {
			list-style: none;
			line-height: 10px;
			height: 10px;
			width: 10px;
			text-align: center;
			float: left;
			border: 1px darkgray solid;
			border-radius: 50%;
			margin: 0px 4px 5px 0px;
			font-size: 5px;
			background: white;
		}
		#WG #wg ul li:hover{
			/* border: 3px solid rgba(0,0,0,0.5); */
			/* margin-top: -3px; */
			background-color: #008B8B;
			cursor: pointer;
		}
	</style>

	<body>
		<div id="WG">
			<img src="3.jpg" />
			<div id="wg">
				<ul>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
					<li><a href=""></a></li>
				</ul>
			</div>
		</div>
	</body>

</html>